<template>
  <dv-border-box11
    title="热门事项"
    :title-width="400"
    :animate="false"
    style="width: 100%; height: 440px; padding: 50px 20px 0 20px"
  >
    <!-- <dv-charts :option="option" style="width: 100%; height: 330px" /> -->
    <div class="header">今日热门事项TOP5</div>
    <dv-capsule-chart :config="config" style="width: 100%; height: 150px" />
    <dv-charts :option="option" style="width: 100%; height: 240px" />
  </dv-border-box11>
</template>

<script setup>
import { reactive, ref } from "vue";

const config = reactive({
  data: [
    {
      name: "南阳",
      value: 167,
    },
    {
      name: "周口",
      value: 123,
    },
    {
      name: "漯河",
      value: 98,
    },
    {
      name: "郑州",
      value: 75,
    },
    {
      name: "西峡",
      value: 66,
    },
  ],
  colors: ["#e062ae", "#fb7293", "#e690d1", "#32c5e9", "#96bfff"],
  unit: "万元",
  labelNum: 8,
});

const option = ref({
  title: {
    text: "周销售额趋势",
  },
  xAxis: {
    name: "第一周",
    nameTextStyle: {
      fill: "#fff",
    },
    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    axisLabel: {
      //标签的样式
      style: {
        fill: "#fff",
      },
    },
    axisLine: {
      //坐标轴配置
      style: {
        stroke: "#fff", //坐标轴线的颜色
      },
    },
    axisTick: {
      //刻度线配置
      style: {
        stroke: "#fff",
      },
    },
  },
  yAxis: {
    name: "销售额",
    data: "value",
    min: 0,
    max: 10,
    axisLabel: {
      //标签的样式
      style: {
        fill: "#fff",
      },
    },
  },
  splitLine: {
    //坐标轴分割线的配置
    style: {
      stroke: `rgba(255, 255, 255, .3)`,
    },
  },
  series: [
    {
      data: [3.5, 8, 9, 6.7, 7.8, 5, 6],
      type: "bar",
      gradient: {
        color: ["#fb7293", "#ffdb5c", "#32c5e9"],
      },
    },
  ],
});
</script>

<style lang="scss" scoped></style>
